<template>
	<view class="top">
		<u-navbar
			class="nav-bar" 
			:is-back="false" 
			:border-bottom="false" 
			back-icon-color="#171717"
			:background="{background: 'transparent'}">
			我的
		</u-navbar>
		<!-- 用户信息 -->
		<view class="top-content">
			<view class="user">
				<view class="user-left">
					<view class="user-left-image">
						<u-image 
							class="image" 
							width="120rpx" 
							height="120rpx" 
							border-radius="120rpx"
							:src="avatarUrl"></u-image>
					</view>
					<view class="user-left-info">
						<view class="name">刘德华</view>
						<view class="text">千晨号: 446806888</view>
					</view>
				</view>
				<view class="user-right">
					<view class="user-right-image" @click="set()">
						<u-image 
							class="image" 
							width="50rpx" 
							height="50rpx" 
							src="/static/icons/setting_icon.png"></u-image>
					</view>
				</view>
			</view>
			<view class="vip">
				<view class="vip-left">
					<view class="vip-left-image">
						<u-image 
							class="image" 
							width="40rpx" 
							height="40rpx" 
							src="/static/icons/vip_icon.png"></u-image>
					</view>
					<view class="vip-left-text">成为商家会员，海量达人免费招募</view>
				</view>
				<view class="vip-right" @click="business()">
					<view class="vip-right-text">商家入驻</view>
					<view class="vip-right-icon">
						<u-image
							class="image" 
							width="30rpx" 
							height="30rpx" 
							src="/static/icons/arrow_right_icon.png"></u-image>
					</view>
				</view>
			</view>
		</view>
		<u-modal
			v-model="modelShow" 
			width="548"
			:show-title="false"
			show-cancel-button
			border-radius="20"
			cancel-color="#999999"
			confirm-color="#171717"
			:content-style="barStyle"
			confirm-text="商家入驻"
			cancel-text="咨询客服"
			confirm="Sample"
			:content="modelContent">
			</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			barStyle: {
				lineHeight: '40rpx',
				color:"#000",
			},
			modelShow: false,
			modelContent: '您尚未入驻平台请先提交资料完成商家入驻',
			avatarUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs1.sinaimg.cn%2Fbmiddle%2F4a20d21ct6272f6f34780&refer=http%3A%2F%2Fs1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617766987&t=e4e11e1632b5d0f6aea175f6d8b13159',
		}
	},
	methods: {
		/* 添加点击事件 */
		set(){
			uni.navigateTo({
				url: '/pages/mine/set/set'
			})
		},
		business(){
			this.modelShow = true;
		},
	},
	options: { styleIsolation: 'shared' }
}
</script>

<style lang="scss" scoped>
.top {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 420rpx;
	background-image: url("/static/img/top_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	&-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 0 35rpx;
		// margin-bottom: 12rpx;
		height: 100%;
		.user {
			display: flex;
			flex: 1;
			&-left {
				display: flex;
				flex: 1;
				&-image {
					margin-right: 20rpx;
				}
				&-info {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					height: 120rpx;
					color: $u-text-white-color;
					.name {
						font-weight: 600;
					}
				}
			}
			&-right {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 120rpx;
			}
		}
		.vip {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 108rpx;
			padding: 0 18rpx 8rpx;
			&-left {
				display: flex;
				align-items: center;
				&-image {
					margin-right: 4rpx;
				}
				&-text {
					color: $u-text-vip-color;
				}
			}
			&-right {
				display: flex;
				align-items: center;
				color: $u-text-white-color;
				&-icon {
					margin-left: 8rpx;
				}
			}
		}
	}
}
/deep/ .u-navbar {
	.u-navbar-inner {
		margin-right: 0 !important;
		.u-slot-content {
			justify-content: center;
			font-size: 32rpx;
			color: #000000;
		}
	}
}
</style>
